import React, { useState } from 'react'
import { 
  Shield, 
  AlertTriangle, 
  CheckCircle, 
  Clock,
  Plus,
  Download,
  Filter,
  Search,
  Calendar,
  TrendingUp,
  TrendingDown,
  FileText,
  Settings,
  Bell,
  Eye,
  Edit
} from 'lucide-react'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell } from 'recharts'

// Mock数据
const complianceData = [
  {
    id: 1,
    regulation: '环境保护法',
    category: '环境合规',
    status: 'compliant',
    lastCheck: '2024-06-15',
    nextCheck: '2024-07-15',
    risk: 'low',
    description: '企业环保设施运行正常，排放达标'
  },
  {
    id: 2,
    regulation: '劳动法',
    category: '劳动合规',
    status: 'warning',
    lastCheck: '2024-06-10',
    nextCheck: '2024-07-10',
    risk: 'medium',
    description: '部分劳动合同需要更新，建议及时处理'
  },
  {
    id: 3,
    regulation: '数据保护法',
    category: '数据合规',
    status: 'non-compliant',
    lastCheck: '2024-06-05',
    nextCheck: '2024-07-05',
    risk: 'high',
    description: '数据保护措施需要加强，存在合规风险'
  },
  {
    id: 4,
    regulation: '反垄断法',
    category: '商业合规',
    status: 'compliant',
    lastCheck: '2024-06-20',
    nextCheck: '2024-07-20',
    risk: 'low',
    description: '商业行为符合反垄断法规要求'
  }
]

const alerts = [
  {
    id: 1,
    type: 'high',
    title: '数据保护合规风险',
    message: '数据保护措施不符合最新法规要求，需要立即整改',
    time: '2小时前',
    read: false
  },
  {
    id: 2,
    type: 'medium',
    title: '劳动合同更新提醒',
    message: '部分员工劳动合同即将到期，需要及时续签',
    time: '1天前',
    read: false
  },
  {
    id: 3,
    type: 'low',
    title: '环保报告提交',
    message: '月度环保报告需要在3天内提交',
    time: '2天前',
    read: true
  }
]

const chartData = [
  { month: '1月', compliant: 85, warning: 10, nonCompliant: 5 },
  { month: '2月', compliant: 87, warning: 8, nonCompliant: 5 },
  { month: '3月', compliant: 89, warning: 7, nonCompliant: 4 },
  { month: '4月', compliant: 88, warning: 9, nonCompliant: 3 },
  { month: '5月', compliant: 90, warning: 7, nonCompliant: 3 },
  { month: '6月', compliant: 92, warning: 5, nonCompliant: 3 },
]

const pieData = [
  { name: '合规', value: 92, color: '#10B981' },
  { name: '警告', value: 5, color: '#F59E0B' },
  { name: '不合规', value: 3, color: '#EF4444' },
]

const quickStats = [
  { title: '合规率', value: '92', unit: '%', change: '+2.1%', trend: 'up', icon: CheckCircle, color: 'text-green-600' },
  { title: '风险项目', value: '8', unit: '个', change: '-3', trend: 'down', icon: AlertTriangle, color: 'text-red-600' },
  { title: '待检查', value: '15', unit: '项', change: '+2', trend: 'up', icon: Clock, color: 'text-yellow-600' },
  { title: '预警数量', value: '3', unit: '个', change: '-1', trend: 'down', icon: Bell, color: 'text-orange-600' },
]

function ComplianceMain() {
  const [activeTab, setActiveTab] = useState('overview')
  const [filter, setFilter] = useState('all')

  const getStatusColor = (status) => {
    switch (status) {
      case 'compliant': return 'text-green-600 bg-green-50'
      case 'warning': return 'text-yellow-600 bg-yellow-50'
      case 'non-compliant': return 'text-red-600 bg-red-50'
      default: return 'text-gray-600 bg-gray-50'
    }
  }

  const getStatusText = (status) => {
    switch (status) {
      case 'compliant': return '合规'
      case 'warning': return '警告'
      case 'non-compliant': return '不合规'
      default: return '未知'
    }
  }

  const getRiskColor = (risk) => {
    switch (risk) {
      case 'high': return 'text-red-600 bg-red-50'
      case 'medium': return 'text-yellow-600 bg-yellow-50'
      case 'low': return 'text-green-600 bg-green-50'
      default: return 'text-gray-600 bg-gray-50'
    }
  }

  const getRiskText = (risk) => {
    switch (risk) {
      case 'high': return '高风险'
      case 'medium': return '中风险'
      case 'low': return '低风险'
      default: return '未知'
    }
  }

  const filteredData = filter === 'all' 
    ? complianceData 
    : complianceData.filter(item => item.status === filter)

  return (
    <div className="p-6 space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">合规监控</h1>
          <p className="text-gray-600">自动化合规检查和实时预警系统</p>
        </div>
        <div className="flex items-center space-x-3">
          <button className="flex items-center px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
            <Download className="w-4 h-4 mr-2" />
            导出报告
          </button>
          <button className="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
            <Plus className="w-4 h-4 mr-2" />
            新增检查
          </button>
        </div>
      </div>

      {/* 快速统计 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {quickStats.map((stat) => {
          const Icon = stat.icon
          return (
            <div key={stat.title} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">{stat.title}</p>
                  <p className="text-2xl font-bold text-gray-900">
                    {stat.value}
                    <span className="text-sm font-normal text-gray-500 ml-1">{stat.unit}</span>
                  </p>
                </div>
                <div className="w-12 h-12 bg-gray-50 rounded-lg flex items-center justify-center">
                  <Icon className={`w-6 h-6 ${stat.color}`} />
                </div>
              </div>
              <div className="mt-2 flex items-center">
                {stat.trend === 'up' ? (
                  <TrendingUp className="w-4 h-4 text-green-600 mr-1" />
                ) : (
                  <TrendingDown className="w-4 h-4 text-red-600 mr-1" />
                )}
                <span className={`text-sm font-medium ${
                  stat.trend === 'up' ? 'text-green-600' : 'text-red-600'
                }`}>
                  {stat.change}
                </span>
                <span className="text-sm text-gray-500 ml-1">vs 上月</span>
              </div>
            </div>
          )
        })}
      </div>

      {/* 标签页导航 */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200">
        <div className="border-b border-gray-200">
          <nav className="flex space-x-8 px-6">
            {[
              { id: 'overview', name: '概览' },
              { id: 'compliance', name: '合规状态' },
              { id: 'alerts', name: '预警中心' },
              { id: 'reports', name: '合规报告' },
              { id: 'settings', name: '设置' }
            ].map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`py-4 px-1 border-b-2 font-medium text-sm ${
                  activeTab === tab.id
                    ? 'border-green-500 text-green-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                {tab.name}
              </button>
            ))}
          </nav>
        </div>

        <div className="p-6">
          {/* 概览标签页 */}
          {activeTab === 'overview' && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* 合规趋势 */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">合规趋势分析</h3>
                  <ResponsiveContainer width="100%" height={300}>
                    <LineChart data={chartData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <Tooltip />
                      <Line type="monotone" dataKey="compliant" stroke="#10B981" strokeWidth={2} name="合规" />
                      <Line type="monotone" dataKey="warning" stroke="#F59E0B" strokeWidth={2} name="警告" />
                      <Line type="monotone" dataKey="nonCompliant" stroke="#EF4444" strokeWidth={2} name="不合规" />
                    </LineChart>
                  </ResponsiveContainer>
                </div>

                {/* 合规分布 */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">当前合规分布</h3>
                  <ResponsiveContainer width="100%" height={300}>
                    <PieChart>
                      <Pie
                        data={pieData}
                        cx="50%"
                        cy="50%"
                        innerRadius={60}
                        outerRadius={100}
                        paddingAngle={5}
                        dataKey="value"
                      >
                        {pieData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Pie>
                      <Tooltip />
                    </PieChart>
                  </ResponsiveContainer>
                  <div className="mt-4 space-y-2">
                    {pieData.map((item) => (
                      <div key={item.name} className="flex items-center justify-between text-sm">
                        <div className="flex items-center">
                          <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: item.color }}></div>
                          <span className="text-gray-600">{item.name}</span>
                        </div>
                        <span className="font-medium">{item.value}%</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* 合规状态标签页 */}
          {activeTab === 'compliance' && (
            <div className="space-y-4">
              {/* 过滤器 */}
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-4">
                  <select
                    value={filter}
                    onChange={(e) => setFilter(e.target.value)}
                    className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
                  >
                    <option value="all">全部状态</option>
                    <option value="compliant">合规</option>
                    <option value="warning">警告</option>
                    <option value="non-compliant">不合规</option>
                  </select>
                  <button className="flex items-center px-3 py-2 text-gray-600 hover:text-gray-900">
                    <Filter className="w-4 h-4 mr-2" />
                    更多筛选
                  </button>
                </div>
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
                  <input
                    type="text"
                    placeholder="搜索法规..."
                    className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
                  />
                </div>
              </div>

              {/* 合规数据表格 */}
              <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          法规名称
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          类别
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          状态
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          风险等级
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          下次检查
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          操作
                        </th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {filteredData.map((item) => (
                        <tr key={item.id} className="hover:bg-gray-50">
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div>
                              <div className="text-sm font-medium text-gray-900">{item.regulation}</div>
                              <div className="text-sm text-gray-500">{item.description}</div>
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                            {item.category}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(item.status)}`}>
                              {getStatusText(item.status)}
                            </span>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <span className={`px-2 py-1 text-xs font-medium rounded-full ${getRiskColor(item.risk)}`}>
                              {getRiskText(item.risk)}
                            </span>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                            {item.nextCheck}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <button className="text-green-600 hover:text-green-900 mr-3">查看</button>
                            <button className="text-blue-600 hover:text-blue-900 mr-3">编辑</button>
                            <button className="text-purple-600 hover:text-purple-900">检查</button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          )}

          {/* 预警中心标签页 */}
          {activeTab === 'alerts' && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* 预警列表 */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">最新预警</h3>
                  <div className="space-y-4">
                    {alerts.map((alert) => (
                      <div key={alert.id} className={`flex items-start space-x-3 p-4 rounded-lg border ${
                        alert.read ? 'bg-gray-50 border-gray-200' : 'bg-red-50 border-red-200'
                      }`}>
                        <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
                          alert.type === 'high' ? 'bg-red-100' : 
                          alert.type === 'medium' ? 'bg-yellow-100' : 'bg-blue-100'
                        }`}>
                          {alert.type === 'high' ? (
                            <AlertTriangle className="w-4 h-4 text-red-600" />
                          ) : alert.type === 'medium' ? (
                            <Clock className="w-4 h-4 text-yellow-600" />
                          ) : (
                            <Bell className="w-4 h-4 text-blue-600" />
                          )}
                        </div>
                        <div className="flex-1">
                          <h4 className="text-sm font-medium text-gray-900">{alert.title}</h4>
                          <p className="text-sm text-gray-600 mt-1">{alert.message}</p>
                          <p className="text-xs text-gray-500 mt-2">{alert.time}</p>
                        </div>
                        {!alert.read && (
                          <div className="w-2 h-2 bg-red-500 rounded-full"></div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>

                {/* 预警统计 */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">预警统计</h3>
                  <div className="bg-gray-50 rounded-lg p-6">
                    <div className="space-y-4">
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-gray-600">高风险预警</span>
                        <span className="text-sm font-medium text-red-600">1个</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-gray-600">中风险预警</span>
                        <span className="text-sm font-medium text-yellow-600">1个</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-gray-600">低风险预警</span>
                        <span className="text-sm font-medium text-blue-600">1个</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-gray-600">已处理预警</span>
                        <span className="text-sm font-medium text-green-600">1个</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* 合规报告标签页 */}
          {activeTab === 'reports' && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div className="bg-white rounded-lg border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <FileText className="w-8 h-8 text-blue-600" />
                    <button className="text-blue-600 hover:text-blue-700">
                      <Download className="w-4 h-4" />
                    </button>
                  </div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">月度合规报告</h3>
                  <p className="text-sm text-gray-600 mb-4">2024年6月合规状况月度报告</p>
                  <div className="flex items-center text-sm text-gray-500">
                    <Calendar className="w-4 h-4 mr-1" />
                    2024-06-30
                  </div>
                </div>

                <div className="bg-white rounded-lg border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <Shield className="w-8 h-8 text-green-600" />
                    <button className="text-green-600 hover:text-green-700">
                      <Download className="w-4 h-4" />
                    </button>
                  </div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">风险评估报告</h3>
                  <p className="text-sm text-gray-600 mb-4">合规风险评估及改进建议</p>
                  <div className="flex items-center text-sm text-gray-500">
                    <Calendar className="w-4 h-4 mr-1" />
                    2024-06-30
                  </div>
                </div>

                <div className="bg-white rounded-lg border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <AlertTriangle className="w-8 h-8 text-red-600" />
                    <button className="text-red-600 hover:text-red-700">
                      <Download className="w-4 h-4" />
                    </button>
                  </div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">预警分析报告</h3>
                  <p className="text-sm text-gray-600 mb-4">预警趋势分析及处理建议</p>
                  <div className="flex items-center text-sm text-gray-500">
                    <Calendar className="w-4 h-4 mr-1" />
                    2024-06-30
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* 设置标签页 */}
          {activeTab === 'settings' && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="bg-gray-50 rounded-lg p-6">
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">检查频率设置</h3>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">高风险项目检查频率</span>
                      <select className="px-3 py-1 border border-gray-300 rounded text-sm">
                        <option>每周</option>
                        <option>每月</option>
                        <option>每季度</option>
                      </select>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">中风险项目检查频率</span>
                      <select className="px-3 py-1 border border-gray-300 rounded text-sm">
                        <option>每月</option>
                        <option>每季度</option>
                        <option>每半年</option>
                      </select>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">低风险项目检查频率</span>
                      <select className="px-3 py-1 border border-gray-300 rounded text-sm">
                        <option>每季度</option>
                        <option>每半年</option>
                        <option>每年</option>
                      </select>
                    </div>
                  </div>
                </div>

                <div className="bg-gray-50 rounded-lg p-6">
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">预警设置</h3>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">高风险预警提前天数</span>
                      <input type="number" className="px-3 py-1 border border-gray-300 rounded text-sm w-20" defaultValue="7" />
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">中风险预警提前天数</span>
                      <input type="number" className="px-3 py-1 border border-gray-300 rounded text-sm w-20" defaultValue="14" />
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">低风险预警提前天数</span>
                      <input type="number" className="px-3 py-1 border border-gray-300 rounded text-sm w-20" defaultValue="30" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default ComplianceMain 